<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element Menu</title>
    <!-- 引入 Element UI 的 CSS 文件 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/public/stylesheet/home.css">
    <style  scoped>
    .page-container {
        display: flex;
        justify-content: space-between; /* 将子元素推到容器两端 */
        align-items: center; /* 垂直居中 */
        margin: 0 40px; /* 在两侧留出 40px 的空白 */
    }

    .shop-info {
        display: flex;
        align-items: center; /* 垂直居中 */
        font-size: 24px;
    }

    .shop-info .logo {
        margin-right: 40px;
    }

    .button-container {
        margin-left: auto; /* 将按钮推到最右侧 */
    }

        .name {
            margin-top: 1px;
            margin-bottom: 10px
        }/* 设置字体大小为24px */
        .add-commodity {
            margin-right: 40px;/* 设置按钮左右边距为40px */
            margin-left: 1000px;
        }

    .custom-button {
            margin-bottom: 20px; /* 可以根据需要调整数值 */
    }
    </style>
</head>
<body>

<div id="app">
    <div class="page-container">
        <div class="shop-info">
            <span class="logo">Store Logo</span>
            <span class="shop-name">Store Name</span>
        </div>
        <div class="button-container">
            <el-button v-if="is_commodity_table_visiable" type="primary" round @click="show_add_form">Add Product</el-button>
        </div>
    </div>

<br>
<el-row class="tac">
    <el-col :span="5">
        <el-menu
        default-active="1"
        class="el-menu-vertical-demo">
        <el-menu-item index="1" @click="show_commodity_table">
            <i class="el-icon-s-goods" ></i>
            <span @click="show_commodity_table">My Products</span>
        </el-menu-item>
        <el-menu-item index="2" @click="show_order_table">
            <i class="el-icon-menu"></i>
            <span slot="title">My Orders</span>
        </el-menu-item>
        <el-menu-item index="3" @click="openChat">
            <i class="el-icon-document"></i>
            <span slot="title">My Customer Service Messages</span>
        </el-menu-item>
        </el-menu>
    </el-col>


    <el-col :span="18">
    <template>
    <el-table
        v-if="is_commodity_table_visiable"
        :data="commodity_data"
        stripe
        style="width: 100%">
        <el-table-column
        prop="commodity"
        label="Product"
        width="280">
        <template slot-scope="scope">
            <div>
                <el-row>
                    <div style="display: flex; align-items: flex-start;">
                        <el-image
                        style="width: 100px; height: 100px;"
                        :src="scope.row.image"
                        fit="cover"></el-image>
                        <div style="margin-left: 10px;"> <!-- 设置适当的左边距 -->
                            <h5>{{ scope.row.name }}</h5>
                            <h5>{{ scope.row.detail }}</h5>
                        </div>
                    </div>
                </el-row>
            </div>
        </template>
        </el-table-column>
        <el-table-column
        prop="type"
        label="Category"
        width="180">
        </el-table-column>
        <el-table-column
        prop="price"
        label="Price">
        </el-table-column>
        <el-table-column
        prop="stock"
        label="Stock">
        </el-table-column>
        <el-table-column
        prop="sold"
        label="Sold">
        </el-table-column>
        <el-table-column
        fixed="right"
        label="Actions"
        width="200">
        <template slot-scope="scope">
        <!-- <el-button @click="out_of_stock(scope.row)" type="primary" round size="medium"@click="out_of_stock(scope.row)">Remove from Sale</el-button> -->
        <!-- <el-button type="text" size="small">编辑</el-button> -->
        <el-popconfirm title="Are you sure you want to remove from sale?"
        width="220"
        confirm-button-text="OK"
        cancel-button-text="Cancel"
        icon-color="#626AEF"
        @confirm="out_of_stock(scope.row)">
            <el-button slot="reference"  type="primary" round size="medium"  class="custom-button">Remove from Sale</el-button>
        </el-popconfirm>

        <el-popconfirm title="Are you sure you want to modify product information?"
        width="220"
        confirm-button-text="OK"
        cancel-button-text="Cancel"
        icon-color="#626AEF"
        @confirm="modify_product_show(scope.row)">
            <el-button slot="reference"  type="primary" round size="medium">Modify product</el-button>
        </el-popconfirm>

        </template>
    </el-table-column>
    </el-table>
    </template>
    <template>
        <div>
            <el-table v-if="is_order_table_visiable"  :data="order_data" style="width: 100%">
            <el-table-column prop="order_id" label="Order ID" width="90"></el-table-column>
            <el-table-column prop="buyer_id" label="Buyer ID" width="90"></el-table-column>
            <el-table-column prop="customername" label="Customer Name" width="150"></el-table-column>
            <el-table-column prop="address" label="Address" width="120"></el-table-column>
            <el-table-column prop="phone" label="Phone" width="120"></el-table-column>
            <el-table-column prop="total_amount" label="Order Amount" width="150"></el-table-column>
            <el-table-column prop="order_time" label="Order Date" width="180"></el-table-column>
            <el-table-column prop="status" label="Order Status" width="120"></el-table-column>
            <el-table-column label="Actions" width="450">
            <template slot-scope="scope">
                <el-popover
                placement="top-start"
                title="Order Details"
                width="200"
                trigger="hover"
                content="Click for detailed information on the items in this order.">
                <el-button  @click="show_detail(scope.row)" round size="small" slot="reference" type="primary">Details</el-button>
                </el-popover>
                <el-popconfirm title="Are you sure you want to ship this order?" confirmButtonText="OK" cancelButtonText="Cancel" @confirm="shipped(scope.row)">
                    <el-button slot="reference" round size="small" type="primary" v-if="scope.row.status==='Paid'">Ship</el-button>
                </el-popconfirm>
                <el-button slot="reference" round size="small" type="primary"  v-if="scope.row.status_return===2 && scope.row.returnInfo.allowed===-1" @click="handleApproveReturn(scope.row, 1)">Approve Return</el-button>
                <el-button slot="reference" round size="small" type="primary"  v-if="scope.row.status_return===2 && scope.row.returnInfo.allowed===-1" @click="handleApproveReturn(scope.row, 0)">Reject Return</el-button>
                <el-button slot="reference" round size="small" type="primary"  v-if="scope.row.status_return===2 && scope.row.returnInfo.allowed===0" disabled>Return Rejected</el-button>
                <el-button slot="reference" round size="small" type="primary"  v-if="scope.row.status_return===2 && scope.row.returnInfo.allowed===1 && scope.row.returnInfo.status===1" disabled>Wait For Shipping</el-button>
                <el-button slot="reference" round size="small" type="primary"  v-if="scope.row.status_return===2 && scope.row.returnInfo.allowed===1 && scope.row.returnInfo.status===3" @click="handleApproveReturn(scope.row, -1)">Receive</el-button>
                <el-button slot="reference" round size="small" type="primary"  v-if="scope.row.status_return===2 && scope.row.returnInfo.allowed===1 && scope.row.returnInfo.status===5" disabled>Return Finished</el-button>
                <el-button slot="reference" round size="small" type="primary"  v-if="scope.row.status_return===2 && scope.row.returnInfo.allowed===1 && scope.row.returnInfo.status===3" disabled>{{scope.row.returnInfo.trackingNumber}}</el-button>
                <el-button slot="reference" round size="small" type="primary"  v-if="scope.row.status_return===2 && scope.row.returnInfo.allowed===-1" disabled>{{scope.row.returnInfo.reason}}</el-button>

              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </el-col>
    <el-dialog
      title="Add Product"
      :visible.sync="is_add_form_visiable"
      width="33%">
      <!-- 表单内容 -->
      <el-form ref="form" :model="add_form_data" label-width="130px">
        <el-form-item label="Product Name" prop="name">
        <el-input v-model="add_form_data.name"></el-input>
        </el-form-item>
        <el-form-item label="Product Details" prop="detail">
        <el-input v-model="add_form_data.detail"></el-input>
        </el-form-item>
        <el-form-item label="Image URL" prop="imagePath">
        <el-input v-model="add_form_data.imagePath"></el-input>
        </el-form-item>
        <el-form-item label="Category" prop="type">
        <el-select v-model="add_form_data.type" placeholder="Please select the Category.">
            <el-option label="Food" value="Food"></el-option>
            <el-option label="Clothing" value="Clothing"></el-option>
            <el-option label="Daily Necessities" value="Daily Necessities"></el-option>
            <el-option label="Digital Product" value="Digital Product"></el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="Price" prop="price">
        <el-input v-model="add_form_data.price"></el-input>
        </el-form-item>
        <el-form-item label="Stock" prop="stock">
        <el-input v-model="add_form_data.stock"></el-input>
        </el-form-item>
        <!-- 其他表单项 -->
        <!-- 提交按钮 -->
        <el-form-item>
        <el-button type="primary" @click="submit_commodity_form">Submit</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

<el-dialog
    title="Modify Product"
    :visible.sync="is_modify_form_visiable"
    width="33%">
    <!-- 表单内容 -->
    <el-form ref="form" :model="modify_form_data" label-width="130px">
    <el-form-item label="Product Name" prop="name">
    <el-input v-model="modify_form_data.name"></el-input>
    </el-form-item>
    <el-form-item label="Product Details" prop="detail">
    <el-input v-model="modify_form_data.detail"></el-input>
    </el-form-item>
    <el-form-item label="Image URL" prop="imagePath">
    <el-input v-model="modify_form_data.imagePath"></el-input>
    </el-form-item>
    <el-form-item label="Category" prop="type">
    <el-select v-model="modify_form_data.type" placeholder="Please select the Category.">
        <el-option label="Food" value="Food"></el-option>
        <el-option label="Clothing" value="Clothing"></el-option>
        <el-option label="Daily Necessities" value="Daily Necessities"></el-option>
        <el-option label="Digital Product" value="Digital Product"></el-option>
    </el-select>
    </el-form-item>
    <el-form-item label="Price" prop="price">
    <el-input v-model="modify_form_data.price"></el-input>
    </el-form-item>
    <el-form-item label="Stock" prop="stock">
    <el-input v-model="modify_form_data.stock"></el-input>
    </el-form-item>
    <!-- 其他表单项 -->
    <!-- 提交按钮 -->
    <el-form-item>
    <el-button type="primary" @click="submit_modify_commodity_form">Submit</el-button>
    </el-form-item>
    </el-form>
</el-dialog>

    <el-dialog title="Order Details" :visible.sync="is_detail_table_visiable">
        <el-table :data="detail_order_info">
        <el-table-column
        prop="commodity"
        label="Product"
        width="280">
        <template slot-scope="scope">
            <div>
                <el-row>
                    <div style="display: flex; align-items: flex-start;">
                        <el-image
                        style="width: 100px; height: 100px;"
                        :src="scope.row.image"
                        fit="cover"></el-image>
                        <div style="margin-left: 10px;"> <!-- 设置适当的左边距 -->
                            <h5>{{ scope.row.name }}</h5>
                            <h5>{{ scope.row.detail }}</h5>
                        </div>
                    </div>
                </el-row>
            </div>
        </template>
        </el-table-column>
        <el-table-column property="number" label="Quantity" width="150"></el-table-column>
        <el-table-column property="price" label="Unit Price" width="150"></el-table-column>
        <el-table-column property="type" label="Category"></el-table-column>
        </el-table>
    </el-dialog>
        <!-- 聊天弹窗 -->
    <el-dialog :visible.sync="chatVisible" width="800px" class="home-chat-container" :show-close="false" title="Chat">
        <div class="home-chat-list">
            <div class="home-chat-list-item" v-for="chat in chatList.values()" :id="chat.id" @click="selectChat(chat)">
                <img :src="chat.avatar" alt="">
                <!-- <img src="/public/assets/img.jpg" alt=""> -->
                <span>{{ chat.name }}</span>
            </div>
        </div>
        <div class="home-chat-page" :key="refreshKey">
            <div class="chat-lines">
                <div v-if="selectedChat" class="chat-one-line-container">
                    <div v-for="line in chatHistory.get(selectedChat.id)">
                        <!-- 商家发的消息，靠右 -->
                        <div v-if="line.sendId === sellerId" class="chat-one-line chat-one-line-user">
                            <span class="chat-line-date">{{ formatDate(line.time) }}</span>
                            <span class="chat-line-content">{{ line.message }}</span>
                            <img :src="sellerAvatar" alt="U">
                        </div>
                        <!-- 用户发的消息，靠左 -->
                        <div v-else class="chat-one-line chat-one-line-seller">
                            <img :src="chatList.get(line.sendId).avatar" alt="">
                            <span class="chat-line-content">{{ line.message }}</span>
                            <span class="chat-line-date">{{ formatDate(line.time) }}</span>
                        </div>
                    </div>
                </div>
                <div v-else>
                    <h2 style="color: #aeaeae; text-align: center;">Select to Chat</h2>
                </div>
            </div>
            <div v-if="selectedChat" class="chat-send">
                <el-input placeholder="Input..." v-model="inputMsg" clearable @keyup.enter="sendMessage">
                </el-input>
                <el-button type="primary" @click="sendMessage" :disabled="sendBtnDisabled">Send</el-button>
            </div>
        </div>
    </el-dialog>
    </el-row>


</div>
<el-alert
title="自定义 close-text"
type="info"
close-text="知道了">
</el-alert>
<!-- 引入 Vue.js 文件 -->
<script src="/component/vue.js"></script>
<script src="/component/axios-0.18.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- 引入 Element UI 的 JS 文件 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="module" src="/public/javascript/seller.js"></script>
</body>
</html>
